<template>
	<view id="course_list" class="select-list">
		<view class="select-list-item" :data-group-id="item.courseGroup" :data-group-name="item.courseGroupName" v-for="(item,index) in list" :key="index" @click="changeExpand(item,index)">
			<view class="classA uv-flex-row" style="align-items: center;height: 42px;justify-content: space-between;padding: 0 10px;cursor: pointer;">
				<view class="info uv-flex-row" style="align-items: center;">
					<uv-icon name="arrow-down" color="#fff" :style="{transition: 'all .2s',transform: `rotate(${item.expand?0:-90}deg)`}"></uv-icon>
					<view v-if="showCheck" class="checkbox" :class="[{'is-checked':hasCheck(item)}]" @click.stop="selectAll(item,hasCheck(item),allCheck(item))">
						<view class="checked" :style="[{opacity: hasCheck(item)?1:0}]">
							<uv-icon :name="allCheck(item)? 'checkmark':'minus'" color="#fff" size="14px"></uv-icon>
						</view>
					</view>
					<text style="margin-left: 10px;color: #fff;">{{item.courseGroupName}}</text>
				</view>
				<view v-if="showSort"><uv-icon name="grid" color="#fff"></uv-icon></view>
				<view v-else :class="item.courseGroup" @click.stop="more(item,'GROUP',item.courseGroup)"><uv-icon name="more-dot-fill" color="#fff"></uv-icon></view>
			</view>
			<view class="classBList-box" :id="`classBList_${index}`">
				<view class="classBList">
					<view @click.stop="clickItem(item,item2)" v-for="(item2,index2) in item.courses" :data-course-id="item2.courseId" :key="index2" :class="{'active':item2.courseId == checkedCourseId}" class="classB uv-flex-row"
						style="justify-content: space-between;align-items: center;height: 40px;padding: 0 10px 0 26px;cursor: pointer;">
						<view class="info uv-flex-row" style="align-items: center;">
							<view v-if="showCheck" class="checkbox" :class="[{'is-checked':item2.checked}]" @click.stop="select(item2)">
								<view class="checked" :style="{opacity: item2.checked?1:0}">
									<uv-icon name="checkmark" color="#fff" size="14px"></uv-icon>
								</view>
							</view>
							<text style="margin-left: 10px;color: #fff;">{{item2.name}}{{item2.courseId}}</text>
						</view>
						<view v-if="showSort"><uv-icon name="grid" color="#fff"></uv-icon></view>
						<view v-else :class="`C-${item2.courseId}`" @click.stop="more(item2,'COURSE',`C-${item2.courseId}`)"><uv-icon name="more-dot-fill" color="#fff"></uv-icon></view>
					</view>
				</view>
				<view @click.stop="add(item)" style="padding: 0 34px;height: 40px;align-items: center;cursor: pointer;" class="uv-flex-row" v-if="!showSort">
					<uv-icon name="plus" color="#fff" size="14px"></uv-icon>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { computed, reactive, getCurrentInstance, ref, watch, nextTick, watchEffect } from 'vue';
	import { animateHeight } from '@/common/utils/index.js'
	const { ctx } = getCurrentInstance();
	let isFirst = true;
	const auto = ref(false)
	const emits = defineEmits(['select', 'more', 'add', 'sortEnd', 'clickItem']);
	let sortableArr = [];
	const expandList = ref([]);
	const checkedCourseId = ref('');
	const props = defineProps({
		list: {
			type: Array,
			default () {
				return []
			}
		},
		showCheck: {
			type: Boolean,
			default: false
		},
		// 是否开启拖拽排序
		showSort: {
			type: Boolean,
			default: false
		}
	})
	watchEffect(() => {
		if (props.list.length && isFirst) {
			isFirst = false;
			nextTick(() => {
				props.list.map((item, index) => {
					if (index == 0) {
						item.expand = true;
						clickItem(item, item.courses[0])
					}
					changeExpand(item, index, 0);
					if (!checkedCourseId.value && index == 0) {
						checkedCourseId.value = item.courses[0].courseId;
					}
				})
			})
		}
		// 设置展开
		if (props.list.length) {
			let has = false;
			props.list.map(item => {
				if (expandList.value.find(o => o.courseGroup == item.courseGroup)) item.expand = true;
				const findCourseId = item.courses.find(o => o.courseId == checkedCourseId.value);
				if (findCourseId) has = true;
			})
			if (!has) {
				clickItem(props.list[0], props.list[0]?.courses[0])
			}
		}
		if (props.showSort && props.list.length) {
			nextTick(() => {
				sortable();
			})
		} else {
			destroySortable();
		}
	})
	const hasCheck = computed((item) => {
		return item => {
			const arr = item.courses.filter(o => o.checked);
			return arr.length > 0;
		}
	})
	const allCheck = computed((item) => {
		return item => {
			const arr = item.courses.filter(o => o.checked);
			return arr.length == item.courses.length;
		}
	})
	// 拖拽排序
	function sortable() {
		import('@/common/js/sortablejs/Sortable.min.js').then(module => {
			const courseList = document.getElementById('course_list');
			sortableArr.push(new Sortable(courseList, {
				group: 'nested_A',
				onEnd: function(evt) {
					change();
				}
			}));
			var classBLists = document.querySelectorAll('.classBList');
			classBLists.forEach(function(classBList, index) {
				sortableArr.push(new Sortable(classBList, {
					group: {
						name: 'nested_B'
					},
					onEnd: function(evt) {
						change();
					}
				}))
			})
		})
	}

	function change() {
		var items = document.querySelectorAll('.select-list-item');
		let sortCourse = [];
		items.forEach(item => {
			const courseGroup = item.getAttribute('data-group-id');
			const courseGroupName = item.getAttribute('data-group-name');
			const classBList = item.querySelector('.classBList');
			const classBArr = classBList.querySelectorAll('.classB');
			if(classBArr.length == 0) {
				item.remove();
			}
			classBArr.forEach(item2 => {
				const courseId = item2.getAttribute('data-course-id');
				sortCourse.push({ courseGroup, courseGroupName, courseId })
			})
		})
		emits('sortEnd', sortCourse);
	}
	// 销毁拖拽排序
	function destroySortable() {
		sortableArr.map(item => {
			item.destroy();
		})
		sortableArr = [];
	}

	function changeExpand(item, index, duration = 200) {
		if (duration > 0) item.expand = !item.expand;
		const el = document.getElementById(`classBList_${index}`);
		if (duration == 0) {
			el.style.height = !item.expand ? 0 : 'auto';
		} else {
			animateHeight(el, !item.expand ? 0 : 'auto', duration);
		}
		expandList.value = uni.$uv.deepClone(props.list.filter(item => item.expand));
	}

	function select(item) {
		item.checked = !item.checked;
		emits('select', item)
	}

	function selectAll(item, hasCheck, allCheck) {
		item.courses.map(o => {
			o.checked = allCheck ? false : hasCheck ? hasCheck : true;
		})
		emits('select', item.courses)
	}
	async function more(item, type, el) {
		const rect = await ctx.$uv.getRect(`.${el}`);
		item.type = type;
		emits('more', { item, rect });
	}

	function add(item) {
		emits('add', item)
	}

	function clickItem(item, item2) {
		checkedCourseId.value = item2.courseId;
		emits('clickItem', {
			courseId: checkedCourseId.value,
			...item
		});
	}
</script>
<style scoped lang="scss">
	.select-list {
		width: 300px;
		background: #000;
		.checkbox {
			position: relative;
			width: 20px;
			height: 20px;
			border-radius: 4px;
			border: 2px solid #666;
			margin-left: 10px;
			&.is-checked {
				border-color: red;
			}
			.checked {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				background: red;
				transition: all .2s;
			}
		}
		.classBList-box {
			height: auto;
			transition: all .2s;
			overflow: hidden;
			.classB.active {
				border-radius: 8px;
				border: 1px solid rgba(216, 88, 134, 0.7);
				background: rgba(216, 88, 134, 0.15);
				color: rgb(216, 88, 134);
			}
		}
	}
</style>